<template>
  <div>
    <header class="je-header">
      <div
        @tap="goBack($event)"
        class="back-btn mui-action-back"
      >
        <i class="jeicon jeicon-angle-left" />
      </div>
      <div class="title">
        任务交办
      </div>
      <div
        @tap="save"
        class="extra je-audio-btn"
      >
        发布
      </div>
    </header>
    <div class="transaction_add-wrp">
      <div class="transaction_add">
        <div class="item set-icon">
          <form-item-title
            type="jeicon-tag"
            style-sheet="color: #63C0E7"
            text="标题"
            star="true"
          />
          <div class="item_content">
            <input
              v-model="formdata.TASK_BT"
              type="text"
              placeholder="请输入标题..."
            >
          </div>
        </div>
        <div class="item set-icon">
          <form-item-title
            type="jeicon-news"
            style-sheet="color: #D670F2"
            text="提醒方式"
            star="false"
          />
          <div class="item_content">
            {{ formdata.TASK_TXFS_NAME }}
          </div>
        </div>
        <div class="item set-icon">
          <form-item-title
            type="jeicon-history"
            style-sheet="color: #939BFF"
            text="执行时间"
            star="true"
          />
          <div
            @tap="handleDateClick('TASK_RWKSSJ')"
            class="item_content je-audio-btn"
          >
            {{ changeDateType(formdata.TASK_RWKSSJ) || '请选择执行时间' }}
          </div>
        </div>
        <div class="item set-icon">
          <form-item-title
            type="jeicon-history"
            style-sheet="color: #939BFF"
            text="完成时间"
            star="false"
          />
          <div
            @tap="handleDateClick('TASK_YQWCSJ')"
            class="item_content je-audio-btn"
          >
            {{ changeDateType(formdata.TASK_YQWCSJ) || '请选择结束时间' }}
          </div>
        </div>
        <div class="item set-icon">
          <form-item-title
            type="jeicon-users-fs"
            style-sheet="color: #F67C7C"
            text="执行人"
            star="true"
          />
          <div
            @tap="selectCommentator"
            class="item_content arrow je-audio-btn"
          >
            {{ formdata.TASK_ZPRNAME }}
          </div>
        </div>
        <div class="item set-icon">
          <form-item-title
            type="jeicon-calendar-check"
            style-sheet="color: #4393F9"
            text="任务内容"
            star="true"
          />
          <div class="item_content">
            <!-- <textarea-autosize
              v-model="formdata.TASK_RWNR"
              class="textarea"
              placeholder="填写任务描述"
            /> -->
            <el-input
              v-model="formdata.TASK_RWNR"
              type="textarea"
              autosize
              class="textarea"
              placeholder="填写任务描述"
              sstyle
              resize="none"
            />
          </div>
        </div>
        <div class="item set-icon">
          <form-item-title
            type="jeicon-task"
            style-sheet="color: #F19F5C"
            text="任务指导"
            star="false"
          />
          <div class="item_content">
            <!-- <textarea-autosize
              v-model="formdata.TASK_RWZD"
              class="textarea"
              placeholder="请输入"
            /> -->
            <el-input
              v-model="formdata.TASK_RWZD"
              type="textarea"
              autosize
              class="textarea"
              placeholder="请输入"
              resize="none"
            />
          </div>
        </div>
        <div
          class="item set-icon"
          style="border: 0;"
        >
          <form-item-title
            type="jeicon-attachment"
            style-sheet="color: #5ED6E6"
            text="相关附件"
            star="false"
          />
          <div class="item_content upload_wrp">
            <div
              v-for="(img, index) in uploadlist"
              :key="index"

              @tap="fullScreen(img.src, index)"
              class="upload je-audio-btn"
            >
              <!-- <img :src="getFullUrl(img.path)"> -->
              <img :src="img.src">
            </div>
            <div
              @tap="upload"
              v-show="uploadlist.length < 6"
              class="upload je-audio-btn"
            >
              <Icon
                type="jeicon-plus"
                style="color: #ffffff;width: 12px;"
              />
            </div>
          </div>
        </div>
      </div>
      <full-screen
        :src="fullScreenImgSrc"
        @hideFull="hideFull"
        @deleteItem="deleteItem"
      />
    </div>
  </div>
</template>

<script>
import formItemTitle from '../../components/formItemTitle/index.vue';
import Icon from '@/components/icon';
import { pick, uploaderImg } from '@/helper';
import fullScreen from '../../components/fullScreen/index.vue';


export default {
  name: 'AddTransaction',
  components: {
    formItemTitle,
    Icon,
    fullScreen,
  },
  data() {
    return {
      dtPicker: null,
      startTime: '起始时间',
      endTime: '结束时间',
      formdata: {
        TASK_TASKFS_CODE: 'once',
        TASK_TASKFS_NAME: '单次任务',
        TASK_TXFS_CODE: '04',
        TASK_TXFS_NAME: '内部提醒',
        JE_SYS_TASK_ID: '',
        TASK_YWFL: '',
        TASK_RWZD: '',
      },
      loading: false,
      uploadlist: [],
      hasFull: false,
      fullScreenImgSrc: '',
      deleteIndex: -1,
    };
  },
  created() {
    this.dtPicker = new mui.DtPicker({
      type: 'hour',
    });
    this.picker = new mui.PopPicker();
    this.$set(this.formdata, 'TASK_RWKSSJ', '');
    this.$set(this.formdata, 'TASK_YQWCSJ', '');
    this.$set(this.formdata, 'TASK_XGFJ', '');
    this.$set(this.formdata, 'TASK_ZPRID', []);
    this.initFormdata = JSON.parse(JSON.stringify(this.formdata));
  },
  mounted() {},
  methods: {
    goBack(event) {
      event.stopPropagation();
      if (this.hasChange()) {
        const btnArray = ['取消', '确定'];
        mui.confirm('是否放弃编辑?', '', btnArray, (e) => {
          if (e.index === 1) {
            return mui.back();
          }
        });
      } else {
        mui.back();
      }
    },
    hasChange() {
      for (const key in this.formdata) {
        if (this.formdata[key] != this.initFormdata[key]) {
          return true;
        }
      }
      return false;
    },
    handleSelectClick() {
      this.picker.show((items) => {
        this.formdata.CALENDAR_CALENDARTYPE_CODE = items[0].value;
        this.formdata.CALENDAR_CALENDARTYPE_NAME = items[0].text;
      });
    },
    handleDateClick(target) {
      // 执行:TASK_RWKSSJ,完成:TASK_YQWCSJ
      this.dtPicker.show(({ value }) => {
        this.dtPicker.hide();
        if (target === 'TASK_RWKSSJ' && this.formdata.TASK_YQWCSJ && this.formdata.TASK_YQWCSJ < this.unitDate(value)) {
          return JE.msg('执行时间不能晚于完成时间!');
        }
        if (target === 'TASK_YQWCSJ' && this.formdata.TASK_RWKSSJ && this.formdata.TASK_RWKSSJ > this.unitDate(value)) {
          return JE.msg('完成时间不能早于执行时间!');
        }
        this.formdata[target] = this.unitDate(value);
      });
    },
    unitDate(dataString) {
      const ymd = dataString.split(' ')[0];
      let hour = dataString.split(' ')[1];
      hour += ':00:00';
      return `${ymd} ${hour}`;
    },
    selectCommentator() {
      if (document.activeElement.blur) {
        document.activeElement.blur();
      }
      JE.selectWin({
        title: '人员',
        configInfo: 'JE_CORE_DEPTUSER,xx,xxx,M',
        type: 'user',
        whereSql: ' AND STATUS=\'1\' AND VALID=\'1\'',
        value: this.formdata.TASK_ZPRID.join(','),
        pkName: 'id',
        callback: (datas) => {
          const { length } = datas;
          if (length < 1) return false;
          this.$set(this.formdata, 'TASK_ZPRID', datas.map(({ id }) => id));
          this.$set(this.formdata, 'TASK_ZPRNAME', datas.map(({ text }) => text).join(','));
          return null;
        },
      });
    },
    changeDateType(date) {
      if (!date) return;
      const y = date.split(' ')[0].split('-')[0];
      const m = date.split(' ')[0].split('-')[1];
      const d = date.split(' ')[0].split('-')[2];
      const h = date.split(' ')[1].split(':')[0];
      return `${y}年${m}月${d}日 ${h}点`;
    },
    save() {
      if (this.loading) return;
      if (!this.formdata.TASK_BT) {
        JE.msg('标题不能为空');
        return;
      }
      if (!/^(?!(\s+$))/.test(this.formdata.TASK_BT)) {
        JE.msg('请输入正确的标题内容');
        return;
      }
      if (!this.formdata.TASK_RWKSSJ) {
        JE.msg('请选择执行时间');
        return;
      }
      if (!this.formdata.TASK_ZPRID || !this.formdata.TASK_ZPRNAME) {
        JE.msg('请选择执行人');
        return;
      }
      if (!this.formdata.TASK_RWNR) {
        JE.msg('任务内容不能为空');
        return;
      }
      if (!/^(?!(\s+$))/.test(this.formdata.TASK_RWNR)) {
        JE.msg('请输入正确的任务内容');
        return;
      }
      if (this.formdata.TASK_RWZD && !/^(?!(\s+$))/.test(this.formdata.TASK_RWZD)) {
        JE.msg('请输入正确的任务指导');
        return;
      }
      this.formdata.TASK_ZPRID = this.formdata.TASK_ZPRID.toString();
      if (this.uploadlist.length > 0) {
        this.formdata.TASK_XGFJ = JSON.stringify(this.uploadlist);
      }
      this.loading = true;
      JE.ajax({
        url: '/je/job/job/addJobDesign',
        params: this.formdata,
      }).then((result) => {
        if (result && result.success) {
          this.$router.push({
            path: '/JE-PLUGIN-TRANSACTION/list',
            query: {
              type: 'refreshList',
            },
          });
          JE.msg('保存成功');
        } else {
          JE.msg('未知错误，保存失败');
        }
        this.loading = false;
      }).catch(() => {
        JE.msg('保存失败');
        this.loading = false;
      });
    },
    upload() {
      const that = this;
      JE.uploadFile({
        params: { metadataStr: "{'uploadType':'OTHER'}" },
        multiple: true,
        maximum: 6 - that.uploadlist.length,
        selectType: 'pick',
        callback(data) {
          mui.toast('上传成功');
          // debugger;
          that.uploadlist.push({
            path: data[0].path,
            src: JE.getFileUrl(data[0].path, 'preview'),
            name: data[0].name,
          });
        },
      }).catch((e) => {
        mui.toast('上传失败');
      });

      /* pick({ multiple: true, maximum: (6 - that.uploadlist.length) }).then(async (e) => {
        const result = await uploaderImg({
          path: e, funcCode: 'JE_SYS_TASK', beanTableCode: 'JE_SYS_TASK', tableCode: 'JE_SYS_TASK', jeFileType: 'PROJECT', pkValue: '',
        });
        result.forEach((item) => {
          const fileMsg = JSON.parse(item.responseText).obj;
          const obj = {
            name: fileMsg.DOCUMENT_DOCNAME,
            path: fileMsg.DOCUMENT_ADDRESS,
            cls: fileMsg.DOCUMENT_ICONCLS,
            id: '',
            extend: fileMsg.DOCUMENT_THUMBNAILCLS,
            src: fileMsg.DOCUMENT_PRIVATEKEY,
          };
          if (that.uploadlist.length > 5) {
            return JE.msg('附件最多上传6张');
          }
          that.uploadlist.push(obj);
        });
      }); */
    },
    fullScreen(src, i) {
      this.fullScreenImgSrc = src;
      this.deleteIndex = i;
    },
    hideFull() {
      this.fullScreenImgSrc = '';
      this.deleteIndex = -1;
    },
    deleteItem() {
      this.uploadlist.splice(this.deleteIndex, 1);
      this.fullScreenImgSrc = '';
      this.deleteIndex = -1;
    },
    // getFullUrl(url) {
    //   return JE.buildURL(JE.getFileUrl(url));
    // },
  },
};
</script>

<style lang="less" scoped>
  @import '~@/theme/index.less';
  .transaction_add-wrp {
    position: absolute;
    top: unit(45 * @hd, px);;
    right: 0;
    bottom: 0;
    left: 0;
    // background: #F8F8F8;
    overflow: auto;
    .transaction_add {
      position: absolute;
      top: 0;
      right: @h-spacing-sm;
      bottom: 0;
      left: @h-spacing-sm;
      background: #ffffff;
      padding: 0 10 * @hd;
      .item {
        display: flex;
        justify-content: flex-start;
        padding: 12 * @hd 0;
        &:not(:last-child) {
          border-bottom: 1px solid rgba(245,245,245,1);
        }
        .item_content {
          flex: 1;
          color: @color-text-base;
          margin-left: 15 * @hd;
          font-size: 16 * @hd;
          position: relative;
          &.upload_wrp {
            display: flex;
            height: auto;
            flex-wrap: wrap;
            // justify-content: space-between;
            justify-content: flex-start;
            margin-left: 10 * @hd;
            .upload {
              width: 70 * @hd;
              height: 64 * @hd;
              background: rgba(239,239,239,1);
              margin-bottom: 10 * @hd;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 5px;
              // &:not(:nth-child(3n - 2)) {
              //   margin-left: 5px;
              // }
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          &.arrow {
            padding-right: 20px;
            &:after {
              // jeicon-angle-right
              content: '';
              border: 1px solid #ADAFAD;
              border-top-color: transparent;
              border-left-color: transparent;
              width: 8px;
              height: 8px;
              position: absolute;
              right: 3px;
              top: 5px;
              transform: rotate(-45deg);
            }
          }
          input {
            border: 0;
            margin: 0;
            padding: 0;
            font-size: 16 * @hd;
            height: auto;
          }
          .placeholder {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 500px;
          }
          .scl {
            transform: scale(0.6);
          }
        }
      }
    }

    .textarea {
      min-height: 100 * @hd !important;
      margin: 0;
      padding: 0;
      top: -4px;
    }
  }
</style>

<style lang="less">
@import "~@/theme/index.less";
.set-icon .jeicon{
  font-size: 14px;
}
header.je-header {
  height: unit(45 * @hd, px);
  // box-sizing: content-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  background-color: #536dfe;
  padding: 0 30px;
  font-size: 32px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 998;
  .back-btn {
    .back-text {
      margin-left: 5px;
    }
    i {
      color: #ffffff;
      font-size: 32px;
    }
  }
  .title {
    text-align: center;
  }
  .extra {
    text-align: right;
  }
  //  mainTitle 模式下 中间区域最大自适应，左右两边补充
  &:not(.main-title) > * {
    flex: 1;
  }
  .title {
    flex: 1;
  }
  &.hide-btn {
    padding-left: 15px;
    padding-right: 18px;
  }
  .je-content{
    padding-top: 0!important;
  }
  &.main-title {
  }
}
.transaction_add-wrp::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
</style>

<style lang="less">
  @import "~@/theme/index.less";
  .el-textarea__inner {
    border: 0;
    font-size: 16 * @hd;
    color: #3F3F3F;
    min-height: 21 * @hd;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
</style>
